<template>
  <div>
    <h3>{{ $t("business.workload.storage") }}</h3>
    <el-form v-if="yamlInfo.spec.volumes" label-position="top">
      <el-collapse v-model="activeNames">
        <el-collapse-item
          v-for="(item, index) in yamlInfo.spec.volumes"
          :key="index"
          style="margin-top: 10px"
          :title="getVolumeTitle(item)"
          :name="index"
        >
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item
                style="margin-left: 20px"
                :label="$t('business.workload.name')"
              >
                <div class="spanInFormStyle">
                  <span :title="item.name">{{ item.name }}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                style="margin-left: 20px"
                :label="$t('business.workload.type')"
              >
                <span>{{ getVolumeTitle(item) }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <div v-if="item.nfs">
            <el-row :gutter="20">
              <el-col v-if="item.nfs?.path" :span="12">
                <el-form-item style="margin-left: 20px" label="Path">
                  <span>{{ item.nfs?.path }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="item.nfs?.server" :span="12">
                <el-form-item style="margin-left: 20px" label="Server">
                  <span>{{ item.nfs?.server }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div v-if="item.persistentVolumeClaim">
            <el-row :gutter="20">
              <el-col v-if="item.persistentVolumeClaim.claimName" :span="12">
                <el-form-item style="margin-left: 20px" label="claimName">
                  <div class="spanInFormStyle">
                    <span :title="item.persistentVolumeClaim.claimName">
                      {{ item.persistentVolumeClaim.claimName }}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div v-if="item.hostPath">
            <el-row :gutter="20">
              <el-col v-if="item.hostPath.path" :span="12">
                <el-form-item style="margin-left: 20px" label="Path">
                  <div class="spanInFormStyle">
                    <span :title="item.hostPath.path">
                      {{ item.hostPath.path }}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col v-if="item.hostPath.type" :span="12">
                <el-form-item style="margin-left: 20px" label="HostType">
                  <div class="spanInFormStyle">
                    <span :title="item.hostPath.type">
                      {{ item.hostPath.type }}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div v-if="item.configMap">
            <el-row :gutter="20">
              <el-col v-if="item.configMap.name" :span="12">
                <el-form-item style="margin-left: 20px" label="ConfigMapName">
                  <div class="spanInFormStyle">
                    <span :title="item.configMap.name">
                      {{ item.configMap.name }}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col v-if="item.configMap.defaultMode" :span="12">
                <el-form-item style="margin-left: 20px" label="DefaultMode">
                  <span>{{ item.configMap.defaultMode }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <div v-if="item.secret">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item style="margin-left: 20px" label="SecretName">
                  <div class="spanInFormStyle">
                    <span :title="item.secret.secretName">
                      {{ item.secret.secretName }}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item style="margin-left: 20px" label="DefaultMode">
                  <span>{{ item.secret.defaultMode }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <br />
  </div>
</template>

<script setup lang="ts">
import { Pod, Volume } from "@/views/domain/kubeHud/api/k8s";
import { ref, watch } from "vue";

const yamlInfo = defineModel<Pod>("yamlInfo");
const activeNames = ref(0);

const getVolumeTitle = (item: Volume) => {
  if (item.persistentVolumeClaim) {
    return "PVC";
  } else if (item.secret) {
    return "Secret";
  } else if (item.configMap) {
    return "ConfigMap";
  } else if (item.hostPath) {
    return "HostPath";
  } else if (item.nfs) {
    return "NFS";
  } else if (item.emptyDir) {
    return "EmptyDir";
  } else {
    return "Unknown";
  }
};
</script>

<style scoped></style>
